<template>
    <div>
        <header class="header">
            <div class="container">
                <h1>{{user.name}}</h1>
                <p>当前选择的职业：
                    <router-link :to="{name:'career-current'}">{{user.career_name}}</router-link>
                </p>
            </div>
        </header>
        <div class="container flex flex-wrap">
            <div class="text-center w-1/2 md:w-1/3 xl:w-1/4 p-2">
                <div>经验值</div>
                <div class="text-3xl">{{user.exp}}</div>
            </div>
            <div class="text-center w-1/2 md:w-1/3 xl:w-1/4 p-2">
                <div>深度值</div>
                <div class="text-3xl">{{user.depth}}</div>
            </div>
            <div class="text-center w-1/2 md:w-1/3 xl:w-1/4 p-2">
                <div>学习时长</div>
                <div class="text-3xl">{{timeText(user.learn_count)}}</div>
            </div>
            <div class="text-center w-1/2 md:w-1/3 xl:w-1/4 p-2">
                <div>课程数量</div>
                <div class="text-3xl">{{user.learn_courses_count}}</div>
            </div>

        </div>
        <div class="container" v-if="user.latest_complete_course">
            <h2 class="text-2xl">最近完成课程</h2>
            <course-tree-node :course="user.latest_complete_course" :key="user.latest_complete_course.id"
                              :career="user.career_id"
            ></course-tree-node>

        </div>
    </div>
</template>

<script>
    import CourseTreeNode from '../components/CourseTreeNode'
    import TimeText from '../mixins/TimeText'
    export default {
        mixins: [TimeText],
        components: {CourseTreeNode},
        data() {
            return {user: {}}
        },
        methods: {
            getUser() {
                axios.get('/user/profile').then(res => {
                    console.log(res);
                    this.user = res.data.data;
                })
            }
        }, created() {
            this.getUser();
        }
    }
</script>

<style scoped>

</style>